<template>
	<div>
		<div class="box">
			<div class="left">
				<router-link to="/login">
					<h3>登录/注册</h3>
					<p>登录查看精彩内容</p>
				</router-link>
			</div>
			<div class="rigth">
				<router-link to="/memberSetting">
				<img src="@/assets/imgs/my/person_defaultphoto@2x.png" alt="" />
				</router-link>
			</div>
		</div>

		<div class="list">
			<div class="links">
				<router-link to="/myCollection">
					<p>我的收藏</p>
				</router-link>
			</div>
			<div class="links">
				<router-link to="">
					<p>与我相关</p>
				</router-link>
			</div>
			<div class="links">
				<router-link to="/myTracks">
					<p class="none">我的足迹</p>
				</router-link>
			</div>

		</div>

		<div class="list list2">
			<div class="links">
				<router-link to="/pushMessage">
					<p>推送消息</p>
				</router-link>
			</div>
			<div class="links">
				<router-link to="/setting">
					<p >设置</p>
				</router-link>
			</div>

		</div>
	</div>

</template>

<script>
	import { Group, Cell, CellBox } from 'vux'
	export default {
		data() {
			return {
				tittle: '',
				num: 0
			}
		},
		created() {},
		methods: {

		},
		components: {
			Group,
			Cell,
			CellBox
		},
		computed: {}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	
	
	
	.box {
		nav {}
		display: flex;
		padding: 30px 15px;
		background: @base-blue-color;
		justify-content: space-between;
		.left {
			h3 {
				font-size: 24px;
				font-weight: bold;
				color: #ffffff;
				margin-bottom: 10px;
			}
			p {
				font-size: 12px;
				font-weight: 500;
				color: #ffffff;
			}
		}
		.rigth {
			width: 60px;
			height: 60px;
			display: inline-block;
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	

	
	.list {
		background: #fff;
		.links {
			padding-left: 15px;
			background: #fff;
			&:active {
				background-color: #ECECEC;
			}
		}
		p {
			height: 50px;
			text-align: left;
			line-height: 50px;
			font-size: 15px;
			color: rgba(51, 51, 51, 1);
			font-weight: 500;
			border-bottom: 1px solid @border-color;
			position: relative;
			&:after {
				content: " ";
				display: inline-block;
				height: 6px;
				width: 6px;
				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				position: absolute;
				top: 50%;
				margin-top: -4px;
				right: 17px;
				border-width: 2px 2px 0px 0px;
				border-color: rgb(200, 200, 205);
				border-style: solid;
			}
		}
		.none {
			border: none;
		}
	}
	.Router{
		background: #edeff2;
	}
	
	.list2 {
		margin-top: 7px;
	}
</style>